<template>
<div class="">
    <el-dialog width="560px" title="修改密码" :visible.sync="state" :show-close="true" :close-on-click-modal="false">
        <div class="reset_pwd" style="width: 500px;">
          <el-form ref="pwdForm" status-icon :rules="rules" :model="pwdForm" label-width="80px">
            <el-form-item label="原密码" prop="oldPwd">
              <el-input type="password" v-model="pwdForm.oldPwd"></el-input>
            </el-form-item>
            <el-form-item label="新密码" prop="newPwd">
              <el-input type="password" v-model="pwdForm.newPwd" @change="checkStrong(pwdForm.newPwd)"></el-input>
              <p style="line-height: 24px; color:#049802;">当前系统密码强度要求为：<span :class="inspectionResult.classname">{{inspectionResult.modes}}</span></p>
              <p style="line-height: 24px; color:#049802;">由单一数字，字母，字符组成。</p>

            </el-form-item>
            <el-form-item label="密码强度">
              <div class="strengths" :class="inspectionResult.classname">
                <span></span>
                <span></span>
                <span></span>
                <span></span>
              </div>
            </el-form-item>
            <el-form-item label="确认密码" prop="checkPass">
              <el-input type="password" v-model="pwdForm.checkPass"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div slot="footer" class="dialog-footer">
            <el-button size="small" type="primary" @click="submitForm('pwdForm')">确 定</el-button>
            <el-button size="small" @click="state = false">关 闭</el-button>
        </div>
    </el-dialog>
</div>
</template>

<script>

export default {
  data() {
      var validatePass = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请输入密码'));
        } else {
          if (this.pwdForm.checkPass !== '') {
            this.$refs.pwdForm.validateField('checkPass');
          }
          callback();
        }
      };
      var validatePass2 = (rule, value, callback) => {
        if (value === '') {
          callback(new Error('请再次输入密码'));
        } else if (value !== this.pwdForm.newPwd) {
          callback(new Error('两次输入密码不一致!'));
        } else {
          callback();
        }
      };
    return {
      state: false,
      pwdForm : {
        oldPwd:'',
        newPwd:'',
      },
      checkPass:'',
      inspectionResult:{
        classname:'',
        modes:''
      },
      rules : {
          oldPwd: [
            { required: true, message: '请输入原始密码', trigger: 'blur' }
          ],
          newPwd: [
            { required: true, message: '请输入新密码', trigger: 'blur' },
            { min: 6, max: 50, message: '密码长度6-50个字符，区分英文大小写', trigger: 'blur' },
            { validator: validatePass, trigger: 'blur' }
          ],
          checkPass: [
            { required: true, message: '请再次输入新密码', trigger: 'blur' },
            { validator: validatePass2, trigger: 'blur' }
          ]
        }
    };
  },
  mounted(){},
  watch:{
    pwdForm:{
      handler (val, oldVal) {
        let self = this;
        self.checkStrong(val.newPwd);
        console.log(val);
        var modes = 0;
        if (val.newPwd.length < 6) return 0;
        if (/\d/.test(val.newPwd)) modes++; //数字
        if (/[a-z]/.test(val.newPwd)) modes++; //小写
        if (/[A-Z]/.test(val.newPwd)) modes++; //大写
        if (/\W/.test(val.newPwd)) modes++; //特殊字符
        // if (val.length > 12) return 4;

        switch (modes) {
              case 1:
                  this.inspectionResult.modes = "弱";
                  this.inspectionResult.classname = "weak";
                  break;
              case 2:
                  this.inspectionResult.modes = "中";
                  this.inspectionResult.classname = "weak good";
                  break;
              case 3:
                  this.inspectionResult.modes = "好";
                  this.inspectionResult.classname = "weak good sthenia";
                  break;
              case 4:
                  this.inspectionResult.modes = "非常好";
                  this.inspectionResult.classname = "weak good sthenia great";
                  break;
          }
      },
    　deep: true
    }
  },
  methods:{
    showDialog(){
      if(this.$refs['pwdForm']!==undefined){
          this.$refs['pwdForm'].resetFields();
       }
       this.pwdForm.oldPwd = '';
       this.pwdForm.newPwd = '';
       this.pwdForm.checkPass = '';
      this.state = true;
    },
    // 检测密码强度
    checkStrong(val) {
        var modes = 0;
        if (val.length < 6) return 0;
        if (/\d/.test(val)) modes++; //数字
        if (/[a-z]/.test(val)) modes++; //小写
        if (/[A-Z]/.test(val)) modes++; //大写
        if (/\W/.test(val)) modes++; //特殊字符
        // if (val.length > 12) return 4;
        console.log(this.inspectionResult);
        switch (val.length) {
              case 0:
                  this.inspectionResult.modes = "";
                  this.inspectionResult.classname = "";
                  break;
              case 1:
                  this.inspectionResult.modes = "弱";
                  this.inspectionResult.classname = "weak";
                  break;
              case 2:
                  this.inspectionResult.modes = "中";
                  this.inspectionResult.classname = "good";
                  break;
              case 3:
                  this.inspectionResult.modes = "好";
                  this.inspectionResult.classname = "sthenia";
                  break;
              case 4:
                  this.inspectionResult.modes = "非常好";
                  this.inspectionResult.classname = "great";
                  break;
          }
    },
    submitForm(formName) {
      let self = this;
      self.$refs[formName].validate((valid) => {
        if (valid) {
          delete self.pwdForm['checkPass'];
          self.axios({
            method: 'post',
            url: api.passwordModify+"?oldPwd="+self.pwdForm.oldPwd+"&newPwd="+self.pwdForm.newPwd,
          }).then(function(response){
            if(response.data.success){
              self.$message({
                message: response.data.msg,
                type: 'success'
              });
              self.state = false;
            }else{
              self.$message.error(response.data.msg);
            }
          });
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  },
  components:{}

};
</script>
<style scoped>
.strengths{padding-top: 15px;}
.strengths span{
  display: inline-block;
  float: left;
  width: 25%;
  border: 5px solid #FFF;
  border-width: 0 5px 0 5px;
  background: #CCCCCC;
  height: 10px;
  line-height: 10px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
 }
 .weak span:nth-child(1){
  background: #FF2E06;
 }
 .good span:nth-child(2){
  background: #FDC800;
 }
 .sthenia span:nth-child(3){
  background: #C9CC03;
 }
 .great span:nth-child(4){
  background: #049802;
 }
 span.weak{
  color: #FF2E06;}
 span.good{
  color: #FDC800;}
 span.sthenia{
  color: #C9CC03;}
 span.great{
  color: #049802;}
</style>